import React, {Component} from 'react';
import {History, Link } from 'react-router';
import { connect } from 'react-redux';
import {QiniuImgUrl} from './url';
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup.js';


export class Imglist extends Component {
    constructor() {
        super();
        this.state = {
            icon:'icon iconfont icon-guanbi blue',
            show:'unshow'
        }
        this.toggle = ()=>{
            if(this.state.show == 'unshow'){
                this.setState({
                    icon:'icon iconfont icon-dakai blue',
                    show:'show'
                })
            }else{
                this.setState({
                    icon:'icon iconfont icon-guanbi blue',
                    show:'unshow'
                })
            }
        }
    }
   
    render() {
        //生成图片个数
        let renderImg = [];
        if(this.props.src !== "" && this.props.src !== null && this.props.src !== undefined){
            const allsrc = this.props.src.split(",")
            allsrc.map((item,index,input) => {
                renderImg.push(<div key={index}><div><img src={QiniuImgUrl+item} alt={this.props.alt} /></div></div>)
            })
        }else{
            renderImg = '';
        }
        //整合后配合ReactCSSTransitionGroup做动画
        let all = '';
        if(this.state.show == "show"){
            all = <div>{renderImg}</div>
        }else{
            all = ''
        }
        return (
            <li>
                <span>{this.props.alt}</span> 
                <span className={this.state.icon} onClick={this.toggle}></span>
                <ReactCSSTransitionGroup transitionName="slidedown" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
                    {all}
                </ReactCSSTransitionGroup>
            </li>
        )
    }
}
